$theme-color: #409EFF;//64,158,255
$bg-color: #f6f7ff;//背景色

/* 为所有的滚动条设置样式 */
::-webkit-scrollbar {
	width: 4px;  /* 设置滚动条的宽度 */
}
 
/* 滚动条轨道 */
::-webkit-scrollbar-track {
	background: #f1f1f1; /* 设置滚动条轨道的颜色 */
}
 
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
	background: #d1d1d1; /* 设置滚动条滑块的颜色 */
}
 
/* 当鼠标滑过滑块 */
::-webkit-scrollbar-thumb:hover {
	background: $theme-color; /* 设置滚动条滑块在鼠标悬停时的颜色 */
}
.content{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* 左侧选择栏 */
.left-item .item:hover {
	border: 1px dashed $theme-color !important;
	color: $theme-color !important;
}
.left-box{
	box-sizing: border-box;
	padding: 10px 15px;
	width: 275px;
	height: 100vh;
	overflow-y: auto;
	.left-item{
		width: 100%;
		.title{
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			clear: both;
			svg{
				width: 18px;
			}
			span{
				margin-left: 5px;
				font-size: 15px;
				color: #333;
			}
		}
		.item:nth-child(even){
			margin-left: 11px;
		}
		.item{
			margin-bottom: 10px;
			box-sizing: border-box;
			padding: 0 15px;
			width: 113px;
			height: 35px;
			display: flex;
			align-items: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			border-radius: 2px;
			background-color: $bg-color;
			border: 1px solid $bg-color;
			cursor: move;
			float: left;
			span{
				margin-left: 8px;
				font-size: 13px;
				color: #333;
			}
		}
	}
}
/* 中间模块 */
.center-item:hover{
	background-color: $bg-color;
}
.active-item{
	background-color: $bg-color;
}
.center-item:hover .item-setup{
	display: block !important;
}
.active-setup{
	display: block !important;
}
.center-box{
	box-sizing: border-box;
	padding: 40px 15px 0;
	width: calc(100% - 715px);
	height: 100vh;
	overflow-y: auto;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	position: relative;
	.preview-box{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		box-sizing: border-box;
		padding: 5px 10px;
		background-color: $theme-color;
		font-size: 14px;
		color: #fff;
		border-bottom-right-radius: 10px;
		cursor: pointer;
	}
	// 拖入时悬浮的样式
	.sortable-chosen{
		width: 100%;
		min-height: 100px;
		background-color: $bg-color;
		border-top: 6px solid $theme-color !important;
		span{
			font-size: 14px;
			color: #333;
			position: relative;
			top: -2px;
			left: 2px;
		}
	}
	.center-item{
		margin-bottom: 10px;
		box-sizing: border-box;
		padding: 20px 15px;
		border-radius: 5px;
		cursor: move;
		position: relative;
		.item-setup{
			position: absolute;
			right: 10px;
			top: -12px;
			z-index: 2;
			display: none;
		}
		.title-box{
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			padding-left: 7px;
			border-left: 4px solid #02C176;
			.title{
				margin-right: 3px;
				word-break: break-all;
				word-wrap: break-word;
			}
			span{
				font-size: 15px;
				color: #333;
			}
		}
		.el-select{
			width: 80%; 
		}
		.input-box{
			box-sizing: border-box;
			padding: 0 10px;
			width: 80%;
			height: 40px;
			line-height: 40px;
			background-color: #fff;
			border: 1px solid #DCDFE6;
			border-radius: 4px;
			font-size: 14px;
			color: #ccc;
		}
		.upload-img{
			width: 100px;
			height: 100px;
			line-height: 100px;
			text-align: center;
			font-size: 30px;
			color: #ccc;
			background-color: #fff;
			border: 1px dashed #d1d1d1;
		}
		.upload-file{
			width: 80%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 14px;
			color: #ccc;
			background-color: #fff;
			border: 1px dashed #d1d1d1;
		}
		.upload-sign{
			width: 80%;
			height: 150px;
			line-height: 150px;
			text-align: center;
			font-size: 14px;
			color: #ccc;
			background-color: #fff;
			border: 1px dashed #d1d1d1;
		}
		.el-select{
			width: 80%;
		}
		.checkbox-box{
			width: 80%;
			.checkbox-item:nth-child(n+2){
				margin-top: 10px;
			}
			.checkbox-item{
				box-sizing: border-box;
				padding: 10px;
				width: 100%;
				display: flex;
				align-items: center;
				border: 1px solid #d1d1d1;
				border-radius: 4px;
				.radio-ico{
					width: 12px;
					height: 12px;
					border: 1px solid #d1d1d1;
					background-color: #fff;
					border-radius: 50%;
				}
				.checkbox-ico{
					width: 12px;
					height: 12px;
					border: 1px solid #d1d1d1;
					background-color: #fff;
				}
				.name{
					margin-left: 5px;
					font-size: 15px;
					color: #333;
					word-break: break-all;
					word-wrap: break-word;
				}
			}
		}
	}
	.btn-box{
		width: 100%;
		height: 60px;
		position: sticky;
		left: 0;
		bottom: 0;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;
		.btn{
			width: 260px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 12px;
			color: #fff;
			border-radius: 50px;
			background-color: $theme-color;
			cursor: pointer;
		}
	}
}
.empty-box{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	font-size: 20px;;
	color: $theme-color;
}
/* 右侧更多 */
.right-box{
	width: 460px;
	height: 100vh;
	overflow-y: auto;
	position: relative;
	.top-info{
		box-sizing: border-box;
		padding: 15px 10px;
		text-align: center;
		font-size: 16px;
		color: $theme-color;
		border-bottom: 1px solid $theme-color;
	}
	.right-content{
		box-sizing: border-box;
		padding: 20px 15px;
		width: 100%;
		height: calc(100vh - 52px);
		overflow-y: auto;
		position: relative;
		.ico-box{
			box-sizing: border-box;
			padding: 3px 5px;
			position: absolute;
			left: 0;
			top: 0;
			background-color: $theme-color;
			border-bottom-right-radius: 10px;
			cursor: pointer;
		}
		.el-input, .el-textarea, .el-select, .el-switch{
			width: calc(100% - 113px);
		}
		.row-box{
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			.title{
				width: 80px;
				text-align: right;
				font-size: 15px;
				color: #666;
			}
		}
	}
}